<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 1226px;
            margin: 50px auto;
            display: flex;

            /* 嵌套的语法默认会被解析为 包含选择器 : .container .magnifier-wrap */
            .magnifier-wrap {
                width: 400px;
                min-height: 500px;
                position: relative;

                .magnifier-preview {
                    width: 400px;
                    height: 400px;
                    position: relative;

                    .shadow {
                        width: 200px;
                        height: 200px;
                        background-color: rgba(0, 0, 0, 0.5);
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: none;
                    }

                    & img {
                        width: 100%;
                    }
                }

                .magnifier-scale {
                    width: 400px;
                    height: 400px;
                    position: absolute;
                    left: 410px;
                    top: 0;
                    overflow: hidden;
                    background-color: rgba(125, 255, 255, 0.5);
                    display: none;

                    & img {
                        width: 800px;
                        height: 800px;
                        position: absolute;
                        /*z-index: -1; */
                    }
                }
            }

            .info-wrap {
                flex: 1;
                min-height: 500px;
                margin-left: 10px;
            }


        }
    </style>
</head>

<body>
    <!-- .container>(.magnifier-wrap>.magnifier-preview+.magnifier-list+.magnifier-scale)+.info-wrap -->
    <div class="container">
        <div class="magnifier-wrap">
            <!-- 图片预览盒子 -->
            <div class="magnifier-preview">
                <img class="smallImg" src="../images/girlsmall1.jpg" alt="">
                <div class="shadow"></div>
            </div>

            <!-- 图片切换 -->
            <!-- <div class="magnifier-list"></div> -->

            <!-- 放大盒子 -->
            <div class="magnifier-scale">
                <img class="bigImg" src="../images/girlbig1.jpg" alt="">
            </div>
        </div>
        <div class="info-wrap">
            <div class="name">当季新品 华为mate60pro 新品手机 雅丹黑 12GB+512GB全网通</div>
            <div class="price">价格:￥ 8099.00</div>
            <div class="count-box">
                <span>-</span>
                <input type="number" value="1" class="count-input">
                <span>+</span>
            </div>
            <div>
                <button class="addToShoppingCar">加入购物车</button>
            </div>
        </div>
    </div>
</body>
<script type="module">
    import { getCookie } from "../js/cookie.js";
    import { ajaxPromise } from "../js/ajax.js";
    import { queryStringParser } from "../js/tool.js";
    import { addToShoppingCarAPI } from "../js/api.js";

    var smallImg = document.getElementsByClassName("smallImg")[0];
    var bigImg = document.getElementsByClassName("bigImg")[0];
    var infoWrap = document.querySelector(".info-wrap");



    var search = location.search; // "?gid=1"
    var str = search.substring(1); // 去掉 ?

    var urlParams = queryStringParser(str);
    // console.log(urlParams);

    var gid = urlParams.gid;

    if (!gid) {  // 如果数据中没有gid
        location.href = "../index.html";
    }

    // await 关键词可以在async函数和模块化脚本中使用
    var result = await ajaxPromise({
        type: "get",
        url: "/goods/searchGoodsById",
        data: {
            gid,
        },
        dataType: "json",
    })
    console.log(result);

    var { code, message, data: { id, title, price, img, comment, "curr-shop": currShop } } = result;

    if (code == 200) {
        smallImg.src = img
        bigImg.src = img

        infoWrap.innerHTML = `<div class="name">${title}</div>
            <div class="price">价格:￥ ${price}</div>
            <div class="price">评论数: ${comment}</div>
            <div class="price">店铺: ${currShop}</div>
            <div class="count-box">
                <span>-</span>
                <input type="number" value="1" class="count-input">
                <span>+</span>
            </div>
            <div>
                <button class="addToShoppingCar">加入购物车</button>
            </div>`
    }



    var addToShoppingCar = document.querySelector(".addToShoppingCar");


    // 加入购物车需要提供哪些信息?
    // 账号信息(谁)   => 当前登录的用户
    // 商品信息(买了什么东西)  => 存商品id(可以通过商品id在商品列表找到对应信息)
    // 数量(买了几件)   => 数量



    // 点击加入购物车?
    addToShoppingCar.onclick = async function () {
        var user = getCookie("lgc"); // 当前登录的用户
        console.log(user);

        // 判断用户是否登录?
        // 登录
        // 没有登录

        if (user) { // 用户已经登录  => 调接口传数据(user, gid, buyNum)

            var result = await addToShoppingCarAPI({ user, gid, buyNum: 1 })
            if (code == 200) {
                if (confirm("加入购物车成功,是否进入购物车页")) {
                    location.href = "./shoppingCar.html";
                }
            }


        } else {  // 没有登录  => 去登录
            // 问题: 登录成功之后直接前往主页面 (期望 回到当前页)
            // 解决方案: 跳过去的同时在url地址栏携带当前页面url信息

            location.href = "./login.html?ReturnUrl=" + encodeURIComponent(location.href);
        }


    }




    /* var magnifierWrap = document.getElementsByClassName("magnifier-wrap")[0];
    var magnifierPreview = document.getElementsByClassName("magnifier-preview")[0];
    var magnifierScale = document.getElementsByClassName("magnifier-scale")[0];
    var shadow = document.getElementsByClassName("shadow")[0];
    var bigImg = document.getElementsByClassName("bigImg")[0];
    var smallImg = document.getElementsByClassName("smallImg")[0];

    var maxLeft = magnifierPreview.clientWidth - shadow.clientWidth;
    var maxTop = magnifierPreview.clientHeight - shadow.clientHeight;
    console.log(magnifierPreview.clientWidth, shadow.clientWidth);

    var scale = bigImg.clientWidth / smallImg.clientWidth;
    console.log(scale, bigImg.clientWidth, smallImg.clientWidth);

    magnifierPreview.onmouseenter = function () {
        shadow.style.display = "block";
        magnifierScale.style.display = "block";

        maxLeft = magnifierPreview.clientWidth - shadow.clientWidth;
        maxTop = magnifierPreview.clientHeight - shadow.clientHeight;

        scale = bigImg.clientWidth / smallImg.clientWidth;
    }
    magnifierPreview.onmousemove = function (e) {
        e = e || window.event;
        // console.log(e);


        // 期望获取的鼠标相对于magnifierPreview的位置(左上角)

        // 问题1: 
        // magnifierPreview的offsetLeft / offsetTop 获取的是相对于magnifier-wrap(有定位)的左偏移和上偏移 => 0 0 
        console.log(magnifierPreview.offsetLeft, magnifierPreview.offsetTop);

        // 解决方案: 
        // 找magnifier-wrap的左偏移和上偏移
        var x = e.pageX - magnifierWrap.offsetLeft - shadow.clientWidth / 2;
        var y = e.pageY - magnifierWrap.offsetTop - shadow.clientHeight / 2;

        if (x < 0) x = 0;
        if (x > maxLeft) x = maxLeft;
        if (y < 0) y = 0;
        if (y > maxTop) y = maxTop;

        // console.log(x, y);

        shadow.style.left = x + "px";
        shadow.style.top = y + "px";

        bigImg.style.left = -scale * x + "px";
        bigImg.style.top = -scale * y + "px";
    }

    magnifierPreview.onmouseleave = function () {
        shadow.style.display = "none";
        magnifierScale.style.display = "none";
    } */

</script>

</html>